把「變數」、「@mixin」等SASS都整理好後，就要來把他引入到HTML裡面了

首先要確認把檔案彙整到一個CSS檔案，HTML只要套用這個CSS就能使用所有的CSS，不用在一個個引入。

1.建立 all.scss ，並在html 連結「all.css 」

<link rel="stylesheet" type="text/css" href="css/all.css">

2.將要引入的scss檔案，檔案前方加上下底線「_ 」，如「_index.scss 」

3.在all.scss 填寫「 @import +’sass檔名’」指令，如下所示：

@import 'index';

儲存後，它會自動產生css資料夾，裡面只有一個all.css檔案，all.css裡面已經有「_index.css」的內容了

這表示成功讓all.css已經有內容了，現在以同樣的方法加入「_variable.scss」

1.把「_index.scss」的數值都改「變數」

2.在all.scss 內容新增variable

這時，「all.scss」「_index.scss」兩個檔案儲存時，卻出現 prepros 錯誤訊息，而且不管是存哪個檔案都會出現!!

原因： @import的順序問題

如果 變數放在「 index」後面，檔案會先讀「 index」，可是裡面有變數，如上圖的$border-color，他無法辨識這是甚麼，自然不管存哪個檔案都會錯誤

解決方法：調整順序，網頁css檔案都排最後

未來@import 如變數、reset等都要依當時情形去排列順序，否則會無法編譯或是排版錯誤。

結果如下：